<template>
	<div style="height: 100%">
		<a-tabs default-active-key="styles" size="small">
			<a-tab-pane key="styles" :tab="i18n('componentStyle.style','风格')">
				<!--标题和边框基础风格-->
				<component-style :curComponent="curComponent"></component-style>
				<!--文本数据风格-->
				<a-collapse default-active-key="1" :bordered="false">
					<template #expandIcon="props">
                        <caret-right-outlined :rotate="props.isActive ? 90 : 0"/>
					</template>
					<a-collapse-panel key="1" :header="textI18n('textStyle','文本样式')">
                        <a-form ref="form" layout="vertical">
                            <a-row>
                                <a-col :span="12">
                                    <a-form-item :label="i18n('componentStyle.fontSize','字体大小')">
                                        <a-input-number style="width: 190px" v-model:value="config.dataSources.fontSize" :min="12" />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-item :label="i18n('componentStyle.fontColor','字体颜色')">
                                        <rx-color-picker v-model:value="config.dataSources.titleColor" :placeholder="'请选择颜色'"></rx-color-picker>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row>
                                <a-col :span="12">
                                    <a-form-item :label="i18n('componentStyle.fontThickness','字体粗细')">
                                        <a-select  v-model:value="config.dataSources.fontWeight" style="width: 190px">
                                            <a-select-option value="bold">
                                                {{i18n('componentStyle.bold','加粗')}}
                                            </a-select-option>
                                            <a-select-option value="normal">
                                                {{i18n('componentStyle.normal','正常')}}
                                            </a-select-option>
                                        </a-select>
                                    </a-form-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-item :label="i18n('componentStyle.alignmentMode','对齐方式')">
                                        <div class="componentStyle-textAlign">
                                            <div class="componentStyle-textAlign-icon" @click="config.dataSources.textAlign='left'" :class="[config.dataSources.textAlign=='left'?'componentStyle-textAlign-hover':'']"><rx-icon-show icon="icon-linezuoduiqi2"/></div>
                                            <div class="componentStyle-textAlign-icon" @click="config.dataSources.textAlign='center'" :class="[config.dataSources.textAlign=='center'?'componentStyle-textAlign-hover':'']"><rx-icon-show icon="icon-linejuzhongduiqi2"/></div>
                                            <div class="componentStyle-textAlign-icon" @click="config.dataSources.textAlign='right'" :class="[config.dataSources.textAlign=='right'?'componentStyle-textAlign-hover':'']"><rx-icon-show icon="icon-lineyouduiqi2"/></div>
                                        </div>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                            <a-row>
                                <a-col :span="12">
                                    <a-form-item :label="textI18n('neonLightShow','开启霓虹灯效果')">
                                        <a-switch v-model:checked="config.dataSources.neonLightShow" size="small" />
                                    </a-form-item>
                                </a-col>
                                <a-col :span="12">
                                    <a-form-item :label="textI18n('neonLightColor','霓虹灯颜色')">
                                        <rx-color-picker v-model:value="config.dataSources.neonLightColor" :placeholder="'霓虹灯颜色'"></rx-color-picker>
                                    </a-form-item>
                                </a-col>
                            </a-row>
                        </a-form>
					</a-collapse-panel>
				</a-collapse>
			</a-tab-pane>
			<a-tab-pane key="dataSources" :tab="i18n('componentStyle.data','数据')">
                <div class="textDef-dataSource">
                    <div>
                        <a-form layout="vertical">
                            <a-form-item :label="textI18n('dataSource','数据来源')">
                                <a-radio-group v-model:value="config.dataSources.source" @change="sourceChange">
                                    <a-radio value="static">{{ textI18n('staticText', '静态文本') }}</a-radio>
                                    <a-radio value="dynamic">{{ textI18n('dynamic', '动态文本') }}</a-radio>
                                </a-radio-group>
                            </a-form-item>
                            <a-form-item :label="textI18n('textContent','文本内容字段')">
                                <a-textarea
                                    :placeholder="textI18n('textContent','文本内容')"
                                    :auto-size="{ minRows: 6 }"
                                    v-model:value="config.dataSources.content"
                                />
                            </a-form-item>
                        </a-form>
                    </div>
                    <dynamic-data-setting
                        v-if="config.dataSources.source=='dynamic'"
                        :config="config"
                        :dataModel="dataModel"
                        :modelConfig="modelConfig"
                        :getDataModel="getDataModel"
                    ></dynamic-data-setting>
                </div>
			</a-tab-pane>
			<a-tab-pane key="advancedConf" :tab="i18n('componentStyle.advanced','高级')">
				<a-form layout="vertical">
					<a-collapse default-active-key="1" :bordered="false">
						<template #expandIcon="props">
                            <caret-right-outlined :rotate="props.isActive ? 90 : 0"/>
						</template>
						<a-collapse-panel key="1" :header="textI18n('hyperlinkSetting','超链接设置')">
                            <template #extra >
                                <span class="checkbox-slot" @click.stop="">
                                    <a-switch  size="small" v-model:checked="config.advancedConf.openLink"  ></a-switch>
                                </span>
                            </template>
							<div v-if="config.advancedConf.openLink">
								<a-form-item :label="textI18n('hyperlink','超链接url')">
									<a-input :placeholder="textI18n('hyperlink','超链接url')" v-model:value="config.advancedConf.linkUrl"/>
								</a-form-item>
								<a-form-item :label="textI18n('openMode','打开方式')">
									<a-select style="width: 100%" v-model:value="config.advancedConf.linkMode">
										<a-select-option value="newWindow">{{textI18n('newWindow','新窗口')}}</a-select-option>
										<a-select-option value="curPage">{{textI18n('openPage','本页面打开')}}</a-select-option>
									</a-select>
								</a-form-item>
								<a-form-item :label="textI18n('hoverColor','鼠标悬停文字颜色')">
									<a-input type="color" v-model:value="config.advancedConf.textColor"/>
								</a-form-item>
							</div>
						</a-collapse-panel>
					</a-collapse>
					<!--刷新配置-->
					<refresh-config v-if="config.dataSources.source=='dynamic'"></refresh-config>
				</a-form>
			</a-tab-pane>
		</a-tabs>
	</div>
</template>

<script>
/**
 * 文本
 */
import ComponentDef from "@/views/modules/design/right-component/common/component-def.js";
import DynamicDataSetting from "@/views/modules/design/right-component/common/dynamic-data-setting.vue";
import RefreshConfig from "@/views/modules/design/right-component/common/refresh-config.vue";
import { RxColorPicker } from '@lowcode/jpaas-base-lib';
export default {
	name: "TextDef",
	mixins:[ComponentDef],
	components:{
		DynamicDataSetting,
        RefreshConfig,
        RxColorPicker
	},
	data() {
		return {}
	},
	created() {
	},
	methods: {
		i18n(name,text,key){
			return this.$ti18(name,text,"componentStyleLang",key);
		},
		textI18n(name,text,key){
			return this.$ti18(name,text,"textLang",key);
		},
		sourceChange(e){
			if(e.target.value=="static"){
                this.config.advancedConf.refreshConfig["isRefresh"]=false;
			}
		}
	},
	watch: {}
}
</script>

<style scoped>
.componentStyle-flog{
	display: flex;
}
.componentStyle-flog-common{
	flex: 1;
}
.componentStyle-flog-common:nth-child(1){
	margin-right: 45px;
}
.componentStyle-textAlign{
	margin-top: 4px;
	display: flex;
	height: 32px;
	border-radius: 4px;
	border: solid 1px #dedede;
	align-items: center;
	justify-items: center;
    width: 190px
}
.componentStyle-textAlign-icon{
	flex: 1;
	height: 32px;
	line-height: 32px;
	font-size: 20px;
	text-align: center;
	cursor: pointer;
	border-right: solid 1px #dedede
}
.componentStyle-textAlign-hover{
	color: #4285f4;
}
.componentStyle-textAlign-icon:hover{
	color:#4285f4;
}
.componentStyle-textAlign-icon:nth-child(3){
	border: none;
}
.textDef-dataSource{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}
</style>
